<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>XML格式化工具</title>
	<link rel="shortcut icon" href="#"/>
	<link rel="stylesheet" type="text/css" href="../css/common/element-ui.css">
	<link rel="stylesheet" type="text/css" href="../css/common/jquery.json-viewer.min.css">
	<script src="../js/common/vue2.js"></script>
	<script src="../js/common/element-ui.js"></script>
	<script src="../js/common/axios.min.js"></script>
	<script src="../js/common/jquery.min.js"></script>
	<script src="../js/common/jquery.json-viewer.min.js"></script>
	<script src="../js/base-utils.js"></script>
	<style>
		.center {
			width: 47%;
			/*height: 600px;*/
			margin: 10px auto;
			padding: 10px 10px;
			box-shadow: 0 2px 300px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
			border-radius: 30px;
		}
		/* json样式 */
		.json-string {color: #00b16a;white-space: pre-wrap;}
		.json-literal {color: blue;}
		.json-toggle {color: coral;font-weight: bold;text-decoration: none}
	</style>
</head>

<body>
	<div id="app" class="center" align="right" style="float: left;">
		<el-button type="success" size="mini" @click="clickFormat">格式化XML</el-button>
		<el-button type="success" size="mini" @click="copyJson">复制</el-button>
		<div>
			<el-input v-model="xmlStr" :rows="3" type="textarea" id="jsonSource"></el-input>
		</div>
	</div>
	<div class="center" style="float: right;overflow:auto">
		<pre style="width: 100%;height: 100%;" id="xmlformat"></pre>
	</div>
</body>
<script src="../js/xmlFormat.js"></script>
<script>
	function selfAdaption(){
		var height = window.innerHeight * 0.85;
		$(".center").css({"height": height + "px"});
		document.getElementById("jsonSource").rows=height / 23;
	}
	selfAdaption();
	// 自适应
	window.addEventListener('resize', selfAdaption);
</script>
</html>